import React from 'react';
import ReactApexChart from 'react-apexcharts';
import { ApexOptions } from 'apexcharts';

interface DonutChartProps {
  data: number[];
  labels: string[];
  height?: number;
  colors?: string[];
  showTotal?: boolean;
  totalLabel?: string;
}

const DonutChart: React.FC<DonutChartProps> = ({ 
  data, 
  labels, 
  height = 350,
  colors = ['#6366f1', '#818cf8', '#a5b4fc', '#c7d2fe'],
  showTotal = true,
  totalLabel = '总数'
}) => {
  const options: ApexOptions = {
    chart: {
      type: 'donut',
      height,
      fontFamily: 'Inter, Noto Sans SC, sans-serif',
      toolbar: { show: false },
      animations: { enabled: true, speed: 800 }
    },
    labels,
    colors,
    dataLabels: { enabled: false },
    legend: {
      position: 'bottom',
      horizontalAlign: 'center',
      fontWeight: 500,
      offsetY: 5
    },
    plotOptions: {
      pie: {
        donut: {
          labels: {
            show: showTotal,
            total: {
              show: showTotal,
              label: totalLabel,
              formatter: (w) => w.globals.seriesTotals.reduce((a: number, b: number) => a + b, 0).toString()
            }
          }
        }
      }
    },
    responsive: [{
      breakpoint: 480,
      options: {
        chart: { width: 200 },
        legend: { position: 'bottom' }
      }
    }],
    tooltip: {
      y: {
        formatter: (val) => `${val}`
      }
    }
  };

  return (
    <ReactApexChart 
      options={options} 
      series={data} 
      type="donut" 
      height={height} 
    />
  );
};

export default DonutChart; 